<template>
  <view class="container" style="position: relative;">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="content">订单详情</block>
    </cu-custom>
    <view class="padding padding-top-xs">
      <view class="bg-white padding">
        <u-steps direction="column" :current="lcList.filter(a=>a.isValid==1).length-1">
          <u-steps-item :title="el.statusDesc" :desc="`${el.createBy||''} ${el.createTime||''}`" v-for="(el,index) in lcList" :key="index">
          </u-steps-item>
        </u-steps>
      </view>
      <u-divider text="订单信息"></u-divider>
      <view class="bg-white radius" v-if="data.id">
        <u-cell-group>
          <u-cell title="客户" :label="data.customerName"></u-cell>
          <u-cell title="订单状态" :value="filterStatus(data.status)"></u-cell>
          <u-cell title="订单来源" :value="data.source==0?'手工录入':'客服推送'"></u-cell>
          <u-cell title="推单单号" :value="data.porderNo"></u-cell>
          <u-cell title="下单时间" :value="data.createTime"></u-cell>
          <u-cell title="交货时间" :value="data.deliveryTime"></u-cell>
          <u-cell title="注意事项" :label="data.remark"></u-cell>
        </u-cell-group>
      </view>
      <u-divider text="商品信息"></u-divider>
      <view>
        <view class="dateItem" v-for="(item,index) in data.orderDetails" :key="index">
          <view class="headBox flex justify-between align-center">
            <view class="title">款号：</view>
            <view class="title">{{item.refNo}}</view>
          </view>
          <view class="padding-tb">
            <view class="title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">型号：</view>
            <view class="title">{{item.refName}}</view>
          </view>
          <view class="padding-bottom flex align-center justify-between">
            <view class="title">面料：</view>
            <view class="title">{{item.fabric||'-'}}</view>
          </view>
          <view class="padding-bottom flex align-center justify-between">
            <view class="title">品类：</view>
            <view class="title">{{item.category||'-'}}</view>
          </view>
          <view class="padding-bottom flex align-center justify-between">
            <view class="title">数量：</view>
            <view class="title">{{item.num}}</view>
          </view>
          <view class="padding-bottom flex   flex-direction">
            <view class="title">款式图：</view>
            <view>
              <image :src="item.picture.split(',')[0]" mode="widthFix" style="width: 100%;"></image>
            </view>
          </view>
          <view class="padding-bottom flex flex-direction">
            <view class="title">结果图：</view>
            <view class="margin-top" @click="prviewImage(item)">
              <image :src="data.orderProductsDetails.filter((p)=>(item.refNo2 && item.refName2)?(p.refNo==item.refNo2 && p.refName==item.refName2):(p.refNo === item.refNo && p.refName === item.refName)).map((p)=>{
            return {imageUrl: p.orderDesignPictureUrl}
        })[0].imageUrl" mode="widthFix" style="width: 100%;"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        orderNo: '',
        lcList: [],
        statusList: [{
            value: 0,
            label: "工厂待审核",
          },
          {
            value: -10,
            label: "待推送",
          },
          {
            value: 10,
            label: "待分配",
          },
          {
            value: 20,
            label: "设计",
          },
          {
            value: 30,
            label: "校对",
          },
          {
            value: 40,
            label: "校对审核未通过",
          },
          {
            value: 50,
            label: "打印",
          },
          {
            value: 60,
            label: "转印",
          },
          {
            value: 70,
            label: "裁切",
          },
          {
            value: 80,
            label: "下货",
          },
          {
            value: 90,
            label: "车缝",
          },
          {
            value: 100,
            label: "质检",
          },
          {
            value: 110,
            label: "包装",
          },
          {
            value: 120,
            label: "物流",
          },
          {
            value: 130,
            label: "发货",
          },
          {
            value: 140,
            label: "完成",
          },
          {
            value: 150,
            label: "已反审",
          },
          {
            value: 170,
            label: "关闭",
          }
        ],
        data: {

        }
      };
    },
    onPageScroll(e) {},
    onReady() {},
    onLoad(option) {
      this.orderNo = option.orderNo;
      this.getDetail()
    },
    onShow() {},
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      prviewImage(detail) {
        var images = this.data.orderProductsDetails.filter((p) => (detail.refNo2 && detail.refName2) ? (p.refNo == detail.refNo2 && p.refName == detail
          .refName2) : (
          p.refNo === detail.refNo && p.refName === detail.refName)).map((p) => {
          return p.orderDesignPictureUrl
        })
        uni.previewImage({
          urls: images
        })
      },
      filterStatus(id) {
        let arr = this.statusList.filter((item) => {
          return item.value == id;
        });
        return arr.length > 0 && arr[0].label;
      },
      getDetail() {
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            forderNo: this.orderNo
          },
          url: `/system/order/list`,
          success: (res) => {
            if (res.code == 200) {
              this.data = res.rows[0]
              this.getJd(res.rows[0].id)
            }
          }
        })
      },
      getJd(id) {
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            orderId: id
          },
          url: `/system/smyOrderTraceLogs/list`,
          success: (res) => {
            if (res.code == 200) {
              this.lcList = res.rows
            }
          }
        })
      }
    },
  }
</script>

<style lang="scss">
  page {
    background: #F5F6F7;
  }

  .modelShowTitle {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(49, 55, 64, 1);
    margin-bottom: 12rpx;
  }

  .inputPlace {
    color: rgba(0, 0, 0, 0.5);
  }

  .modelInput {
    width: 100%;
    height: 96rpx;
    background: rgba(165, 168, 173, .08);
    border-radius: 12rpx;
    min-height: 48px;
    padding: 14rpx;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      color: #2a2a2a;
      background: none;
      border: none;
    }
  }

  .qrcodeModal2 {
    padding: 30upx 160upx;
    position: absolute;
    width: 100%;
    top: 300rpx;
    opacity: .2;

    .qrcodeText {
      position: relative;
      font-size: 28upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }
  }

  .qrcodeModal {
    padding: 30upx;
    width: 100%;

    .qrcodeText {
      position: relative;
      font-size: 40upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }

    .qrcodeIntro {
      font-size: 28upx;
      position: relative;
      font-weight: 400;
      color: rgba(154, 165, 184, 1);
      text-align: center;
      top: -90upx
    }
  }

  .qrcodeButton {
    width: 100%;
    height: 96upx;
    opacity: 1;
    border-radius: 122upx;
    background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
    box-shadow: 0px 17upx 51upx rgba(233, 239, 245, 1);
    text-align: center;
    font-size: 28upx;
    color: #fff;
    line-height: 96upx;
    letter-spacing: 2upx;
  }

  .u-modal__content {
    flex-direction: column !important;
  }

  .cancleBtn {
    width: 260.62upx;
    height: 80upx;
    opacity: 1;
    border-radius: 12rpx;
    background: rgba(0, 0, 0, 0.05);
    font-size: 32upx;
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(49, 55, 64, 1);

    &.sumbit {
      background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
      color: #FFFFFF;
    }
  }

  .dateItem {
    width: 100%;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 30rpx;
    margin-top: 16rpx;

    .headBox {
      border-bottom: 1px solid rgba(154, 165, 184, 0.11);
      padding: 20rpx 0;
    }

    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(49, 55, 64, 1);
      text-align: left;
    }

    .date {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
      text-align: left;
    }

    .allPrice {
      font-size: 34rpx;
      font-weight: 700;
      color: rgba(18, 96, 252, 1);
    }

    .price {
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
    }
  }

  .sumbitModle {
    position: fixed;
    bottom: 100rpx;
    width: calc(100% - 80rpx);
    left: 40rpx;
  }

  .sumbit {
    height: 96rpx;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(18, 96, 252, 1);
    box-shadow: 0px 17rpx 51rpx rgba(233, 239, 245, 1);
    font-size: 28rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &.pop {
      width: calc(100% - 80rpx);
    }
  }

  .sharePoup {
    width: 700rpx;

    .form-box {
      padding: 0 30rpx;
    }

    .headModal {
      height: 100upx;
      position: relative;
      display: flex;
      justify-content: center;
      background: #f5f5f5;
      border-top-right-radius: 8rpx;
      border-top-left-radius: 8rpx;
      align-items: center;
      font-size: 32upx;
      font-weight: 500;
      color: rgba(49, 55, 64, 1);
    }

    .timeModel {
      width: 100%;
      height: 600upx;
      padding: 0 40upx;
      padding-bottom: 10upx;
    }

    .searchModel {
      padding: 20rpx 0;
    }

    .selectText {
      color: rgb(192, 196, 204);
      font-size: 32rpx;

      &.change {
        color: #303133;
      }
    }
  }
</style>